<script setup>

import {
  ClearOutlined,
  MessageOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignBottomOutlined
} from "@ant-design/icons-vue";
import axios from "axios";
import { message } from "ant-design-vue";

// 缓存清除
const clearCache = () => {
  localStorage.clear();
  message.success( '清除缓存成功', 1, () => {
    window.location.href = '/';
  } );
}

const unreadCount = ref( 0 );
const getUnreadCount = () => {
  axios.get( '/api/notice-unread-count', {
    params : {
      user_id : 1
    }
  } ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      unreadCount.value = res.data.data.unread_count;
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } )
}

// 消息列表
const noticeList = ref( [] );
const getNoticeList = () => {
  showDrawer();
  getNoticeData();
}

// 搜索标题
const noticeTitle = ref( '' );
const onSearch = () => {
  axios.get( '/api/notice-list', {
    params : {
      user_id : 1,
      keywords : noticeTitle.value,
      page : 1,
      pageSize : pageSize.value,
    }
  } ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      let response = res.data.data;
      noticeList.value = response.list;
      loading.value = (response.total <= pageSize.value);
      nextTick( () => {
        window.dispatchEvent( new Event( 'resize' ) );
      } );
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } );
}

// 加载更多
const initLoading = ref( true );//初始化加载
const loading = ref( false );//加载更多
const page = ref( 1 );
const pageSize = ref( 10 );
const onLoadMore = () => {
  loading.value = true;
  page.value += 1;
  getNoticeData();
};

// 获取消息列表
const getNoticeData = () => {
  axios.get( '/api/notice-list', {
    params : {
      user_id : 1,
      keywords : noticeTitle.value,
      page : page.value,
      pageSize : pageSize.value,
    }
  } ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      let response = res.data.data;
      noticeList.value = noticeList.value.concat( response.list );
      loading.value = (response.total <= pageSize.value * page.value);
      nextTick( () => {
        window.dispatchEvent( new Event( 'resize' ) );
      } );
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } );
}

//获取消息详情
const noticeInfo = reactive( {
  id : 0,
  notice_id : 0,
  title : '',
  keywords : '',
  content : '',
  create_time : '',
} );
const getNoticeLogInfo = ( id ) => {
  axios.get( '/api/notice-info', {
    params : {
      user_id : 1,
      id : id
    }
  } ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      let response = res.data.data;
      noticeInfo.notice_id = response.notice_id;
      noticeInfo.title = response.title;
      noticeInfo.keywords = response.keywords;
      noticeInfo.content = response.content;
      noticeInfo.create_time = response.create_time;
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } );
}

const topUp = ( e, id ) => {
  e.stopPropagation(); // 阻止事件冒泡
  axios.post( '/api/notice-up-edit', {
    id : id,
  } ).then( res => {
    if ( res.data.code !== 200 ) {
      message.error( res.data.msg );
    } else {
      onSearch();
      noticeList.value.forEach( item => {
        if ( item.id === id ) {
          message.success( item.is_top === 1 ? '取消置顶成功' : '置顶成功' );
        }
      } );
    }
  } ).catch( err => {
    console.log( err );
    message.error( '请求失败' );
  } );
}

const open = ref( false );
const openChildren = ref( false );
const showDrawer = () => {
  open.value = true;
}
const showChildrenDrawer = ( id ) => {
  openChildren.value = true;
  getNoticeLogInfo( id );
  noticeList.value.forEach( item => {
    if ( item.id === id ) {
      item.is_read = 1;
    }
  } );
}
const onClosed = () => {
  open.value = false;
  getUnreadCount();
}
const onClosedChildren = () => {
  openChildren.value = false;
}

//页面初始化
onMounted( () => {
  initLoading.value = false;
  getUnreadCount();
} );
</script>

<template>
  <a-float-button-group shape="circle" style="right: 24px;bottom: 24px;">
    <a-badge :count="unreadCount" style="margin-right: 5px;cursor: pointer;" @click="getNoticeList">
      <a-float-button shape="circle" type="primary">
        <template #icon>
          <MessageOutlined/>
        </template>
      </a-float-button>
    </a-badge>
    <a-float-button shape="circle" type="primary" @click="clearCache">
      <template #icon>
        <ClearOutlined/>
      </template>
    </a-float-button>
  </a-float-button-group>
  
  <a-drawer v-model:open="open" title="消息列表" width="500" :closable="true" :body-style="{ padding: 0 }" @close="onClosed">
    <div style="padding: 8px;">
      <a-input-search v-model:value="noticeTitle" placeholder="请输入搜索内容" style="width: 100%" @search="onSearch" :allowClear="true"/>
    </div>
    <a-list :data-source="noticeList" size="small" :loading="initLoading" item-layout="horizontal">
      <template #renderItem="{ item }">
        <a-list-item @click="showChildrenDrawer(item.id)">
          <template #actions>
            {{ item.create_time }}
            <a-button v-if="!item.is_top" @click="topUp($event, item.id)">
              <VerticalAlignTopOutlined/>
              置顶
            </a-button>
            <a-button v-else @click="topUp($event, item.id)">
              <VerticalAlignBottomOutlined/>
              取消置顶
            </a-button>
          </template>
          <a-list-item-meta :description="item.content">
            <template #title>
              <template v-if="!item.is_read">
                <a-badge dot :offset="[15, 5]">{{ item.title }}</a-badge>
              </template>
              <template v-else>{{ item.title }}</template>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
      
      <template #loadMore>
        <div v-if="!initLoading && !loading" style="text-align: center;margin-top: 10px;">
          <a-button @click="onLoadMore">loading more</a-button>
        </div>
      </template>
    </a-list>
    
    <a-drawer v-model:open="openChildren" @close="onClosedChildren" width="500" :title="noticeInfo.title" :closable="true">
      <a-typography>
        <a-typography-title :level="4">{{ noticeInfo.title }}</a-typography-title>
        <a-typography-title :level="5">{{ noticeInfo.keywords }}</a-typography-title>
        <a-typography-paragraph>{{ noticeInfo.create_time }}</a-typography-paragraph>
        <a-typography-paragraph copyable>{{ noticeInfo.content }}</a-typography-paragraph>
      </a-typography>
    </a-drawer>
  </a-drawer>

</template>

<style scoped>

</style>